<template>
	<view class="conten">
		<view style="width: 100%;height: 230rpx;"></view>
		<view class="hi" style="font-size: 60rpx;">账号注册</view>
		
		<view style="width: 85%;margin: 80rpx auto;">
			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">手机号</view>
			<view style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;display: flex;justify-content: space-between;align-items: center;">
				<view>
					<view class="sjh">
						<input type="text" v-model="phone" placeholder="请输入手机号" style="color: #fff;"/>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="width: 6rpx;height: 50rpx;background-color: #F0F0F0;"></view>
					<view style="margin: 0 15rpx 0 30rpx;color: #F0F0F0;" @click="obtaincode">{{buttonText}}</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">验证码</view>
			<view style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;display: flex;justify-content: space-between;align-items: center;">
				<view>
					<view class="sjh">
						<input v-model="code" type="text" placeholder="请输入验证码" style="color: #fff;"/>
					</view>
				</view>
				<view style="margin-right: 50rpx;" @click="empty">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/xxx.png"></image>
				</view>
			</view>
		</view>
		<view @click="next_step" style="width: 85%;height: 100rpx;background-color: #fff;color: #0D4283;margin: 60rpx auto;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 50rpx;">下一步</view>
		<view @click="login" style="width: 85%;height: 100rpx;color: #fff;margin: 60rpx auto;text-align: center;line-height: 100rpx;font-size: 50rpx;">登录</view>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	export default {
		data() {
			return {
				code: '',
				buttonText: '获取验证码',
				countdown: 60,
				countdownInterval: null,
				phone: '',
				code: ''
			}
		},
		methods: {
			empty(){
				this.code = ''
			},
			next_step(){
				user.mobilelogin({
					mobile:this.phone,
					captcha:this.code,
				}).then(res => {
					if(res.code == 1){
						if(res.data.is_exist_user == 1){
							uni.setStorageSync('token', res.data.userinfo.token);
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}else{
							uni.setStorageSync('token', res.data.userinfo.token);
							uni.navigateTo({
								url: '/pages/login/perfect'
							})
						}
					}
				});
			},
			obtaincode(){
				if (this.countdownInterval) {
				    return;
				}
				console.log(this.phone)
				const reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确!',
						icon: 'none'
					})
					return
				}
				user.send({
					mobile:this.phone,
					event:'mobilelogin',
				}).then(res => {
					if(res.code == 1){
						console.log(res)
					}
				});
				this.buttonText = `${this.countdown} S`;
				    this.countdownInterval = setInterval(() => {
				    this.countdown--;
				    this.buttonText = `${this.countdown} S`;
				    if (this.countdown <= 0) {
				        clearInterval(this.countdownInterval);
				        this.countdownInterval = null;
				        this.buttonText = '获取验证码';
				        this.countdown = 60; // 重置倒计时
				    }
				}, 1000);
			},
			login(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.conten{
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom, #1C386E, #4683CF);
	}
	.hi{
		width: 85%;
		margin: 0 auto 20rpx;
		color: #fff;
	}
	.welcome{
		width: 85%;
		margin: 0 auto 80rpx;
		color: #fff;
	}
</style>
